<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            div.text-align-test {
                width: 500px;

                /* 
                  text-align 文本的水平对齐
                        可选值:
                          left 左侧对齐
                          right 右侧对齐
                          center 居中对齐
                          justify 两端对齐
                */
                text-align: justify;
            }

            div.chui-zhi {
                width: 800px;
                border: 1px red solid;
            }

            span {
                font-size: 20px;
                border: 1px blue solid;
                /* 


                使用场景：解决图片底部默认空白缝隙的问题
                        bug：图片地测会有一个空白缝隙，原因是行内块元素会和文字的基线对其。
                        主要解决方法有两种：
                        1.给图片添加vertical-align:middle|top|bottom等属性（提倡使用的）
                        2.把图片转换为块级元素 display：block；

                        vertical-align 它只影响行内元素和行内块元素，不影响块级元素等，所以它最主要的是拿来使文字和图片对其，不让文字超过图片，影响其美观

                    vertical-align 设置元素垂直对齐的方式
                    可选值:
                      baseline 默认值 基线对齐
                      top      顶部对齐 
                      bottom   底部对齐
                      middle   居中对齐
                */
                vertical-align: top;
            }

            p {
                border: 1px red solid;
            }

            img {
                vertical-align: middle;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <div class="chui-zhi">今天天气<span>真不错</span>!</div>

        <div class="text-align-test">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo nihil
            dolorum libero fugit? Impedit error beatae, suscipit, voluptatum
            quas modi accusantium earum porro aliquam, incidunt eius odio quidem
            dolorum temporibus.
        </div>

        <p>
            <img src="./img/an.jpg" alt="" />
        </p>
    </body>
</html>
